<template>
  <div class="main">
    <view class="title fz16 bold">请完善您的身份信息</view>
    <view class="item">
      <view class="flex justifyBetween alignCenter label">
        <view class="bold fz14">请输入您本人的名字</view>
      </view>

      <uv-input placeholder="请输入您本人的名字" shape="circle" border="none" :customStyle="inputStyle" v-model="valueDate.name"></uv-input>
    </view>

    <view class="item">
      <view class="flex justifyBetween alignCenter label">
        <view class="bold fz14">请输入您的身份证号</view>
      </view>

      <uv-input placeholder="请输入您的身份证号" shape="circle" border="none" :customStyle="inputStyle" v-model="valueDate.idCard"></uv-input>
    </view>

    <view class="next">
      <uv-button @click="next" :loading="loading" :customStyle="nextBtnStyle" text="保 存" shape="circle" color="linear-gradient(to right, rgba(178, 161, 255, 1), rgba(211, 167, 249, 1))"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

let inputStyle = ref({
  backgroundColor: "#F6F6F6",
  padding: "10px 10px",
});
let loading = ref(false);

let nextBtnStyle = ref({
  width: "calc(100% - 20px)",
  boxShadow: "0 2px 8px 2px rgba(182, 159, 254, 0.53)",
});
let valueDate = ref({
  name: "",
  idCard: "",
});

async function next() {
  try {
    loading.value = true;
    await proxy.$apis.realNameAuthentication(valueDate.value);
    proxy.$utils.showToast("提交成功");
    setTimeout(() => {
      proxy.$utils.back();
    }, 1500);
  } catch (error) {
  } finally {
    loading.value = false;
  }
}
</script>



<style lang="scss" scoped>
.main {
  padding: 15px;
}
.title {
  margin-bottom: 48px;
}
.item {
  margin-bottom: 23px;
  .label {
    margin-bottom: 11px;
  }
  text {
    color: #999999;
    font-weight: initial;
  }
  .desc {
    color: #999999;
    padding: 6px 0 20px;
  }
}
.skip {
  color: #009eff;
}
.next {
  margin-top: 10vw;
}
</style>
